<template>
  <div class="replenishmentAcceptance">
    <!--   // 补货采购流程确认 -->

    <el-row>
      <el-col :span="6">
        <el-form-item label="补货单号">
          <el-input v-model="assectForm.replenishmentNumber"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item label="">

        </el-form-item>
      </el-col>

      <el-col :span="6">

        <el-form-item label="申请部门">
          <treeSelect name="deptName" :childData='childData' v-model="assectForm.repDept"></treeSelect>
        </el-form-item>
      </el-col>

    </el-row>

    <el-row>
      <el-col :span="14">
        <el-form-item label="申请理由">
          <el-input v-model="assectForm.applyReason"></el-input>
        </el-form-item>
      </el-col>

    </el-row>
    <!-- <el-row>
      <el-col :span="5">
        <el-form-item label="采购清单">

        </el-form-item>
      </el-col>

    </el-row> -->

    <div style="text-align:left; cursor:pointer">

      <span style="margin-right:17px;font-size:15px;font-weight:700">
        采购清单
      </span>

      <el-button size="small" type="warning" @click="downLoad">
        <img src="static/image/newWork/icon_export.png" alt="">
        导出
      </el-button>

      <div style="margin:10px 0 20px 80px;width:76%">
        <el-table show-summary :summary-method='getSummaries' :data="assectForm.repairInvoiceGoods" border style="width: 100%">
          <el-table-column prop="gmId" label="物品编号" width="180">
          </el-table-column>
          <el-table-column prop="repName" label="物品名称">
          </el-table-column>
          <el-table-column prop="newRepSupplierNo" label="物品分类">
          </el-table-column>
          <el-table-column prop="repBrand" label="品牌">
          </el-table-column>
          <el-table-column prop="repModel" label="型号">
          </el-table-column>
          <el-table-column prop="repMeasuringUnitName" label="单位">
          </el-table-column>
          <el-table-column prop="gmProportion" label="默认比例">
          </el-table-column>
          <el-table-column prop="repSpec" label="规格">
          </el-table-column>
          <el-table-column prop="repId" label="当前库存">
          </el-table-column>
          <el-table-column prop="repNumber" label="补货数量">
          </el-table-column>
          <el-table-column prop="repPrice" label="单价">
          </el-table-column>
          <el-table-column prop="unitPrice" label="预供应商" width="200">
            <template slot-scope="{row}">
              <el-select v-model="row.repSupplierNo" filterable placeholder="请选择">
                <el-option v-for="item in customerNameData" :key="item.customerNo" :label="item.customerName" :value="item.customerNo">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="repTotal" label="总价(元)">
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>
import treeSelect from "./treeSelect.vue";
import { getTree, exportGoods, getCustomerName } from "@/api/assetsWorkApp.js";
export default {
  data() {
    return {
      customerNameData: [],
      childData: [],
    };
  },
  mounted() {
    this.getTreeFun();
    this.getCustomerNameFun();
  },
  methods: {
    async getCustomerNameFun() {
      const res = await getCustomerName();
      console.log(res, 104);
      if (res.data.resp_code == 0) {
        this.customerNameData = res.data.datas;
      }
    },

    getSummaries(param) {
      const { columns, data } = param;

      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));

        if (!values.every((value) => isNaN(value))) {
          if (index == columns.length - 1) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);

            sums[index] += " 元";
          } else {
            sums[index] = "";
          }
        } else {
          sums[index] = "";
        }
      });
      console.log(sums, 177);
      return sums;
    },
    async exportGoodsFun() {
      let id = this.instanceId;
      let access_token = localStorage.getItem("accessToken");
      const res = await exportGoods(id, access_token);
      let a = document.createElement("a");
      let blob = res.data;
      console.log(blob, 146);
      let binaryData = [];
      binaryData.push(blob);
      //   console.log(window.URL.createObjectURL, 151);
      let url = window.URL.createObjectURL(new Blob(binaryData));
      a.download = "采购清单.xls";
      a.href = url;
      a.click();

      window.URL.revokeObjectURL(url);
    },
    downLoad() {
      this.exportGoodsFun();
    },
    async getTreeFun() {
      let params = {
        access_token: localStorage.getItem("accessToken"),
      };
      const res = await getTree(params);

      if (res.data.resp_code == 0) {
        this.childData = res.data.datas;
      }
    },
  },
  components: {
    treeSelect,
  },
  props: {
    actName: {},
    assectForm: {},
    instanceId: {},
  },
};
</script>

<style lang="less" scoped>
// @import "xxx";
// @import url(xxx);
.replenishmentAcceptance {
}
</style>